<template>
	<div>
		<div ref="biaotou">
			<el-form inline :model="formData">
<!-- 				<el-form-item label="单号">
					<el-input size="mini" placeholder="单号" v-model="formData.formNumber"></el-input>
				</el-form-item>
				<el-form-item label="负责人">
					<el-select size="mini" v-model="formData.director">
						<el-option v-for="item in fuzerenList" :value="item.value" :label="item.name" :key="item.value"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item>
					<!-- <el-button type="primary" size="mini">查询</el-button> -->
					<el-button type="success"  @click="PayrollDetailsAddEntiy.show = true">新建</el-button>
					<!-- <el-button type="danger" size="mini">删除</el-button> -->
				</el-form-item>
			</el-form>
		</div>
		<div>
			<el-table :height="tableStyle+'px'" :data="payrollList" border>
				<el-table-column type="selection" width="40" align="center"></el-table-column>
				<el-table-column type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
				<el-table-column label="工单编号" align="center" prop="PayrollNumber" width="250"></el-table-column>
				<el-table-column label="施工类别" align="center" prop="ConstructionType">
					<template slot-scope="scope">
						{{ getDataMessage('Position',scope.row) }}
					</template>
				</el-table-column>
				<el-table-column label="施工部位" align="center" prop="ConstructionPart">
					<template slot-scope="scope">
						{{ getDataMessage('Category',scope.row) }}
					</template>
				</el-table-column>
				<el-table-column label="工作内容" align="center" prop="JobContent">
					<template slot-scope="scope">
						{{ getDataMessage('Content',scope.row) }}
					</template>
				</el-table-column>
				<el-table-column label="开始时间" align="center" prop="CreateTime"></el-table-column>
				<el-table-column label="方量(平方数量)" align="center" prop="Squarequantity"></el-table-column>
				<el-table-column label="单价" align="center" prop="Price"></el-table-column>
				<el-table-column label="总价" align="center" prop="Totalprice"></el-table-column>
				<el-table-column label="责任人" align="center" prop="PersonId">
					<template slot-scope="scope">
						{{ getDataMessage('User',scope.row) }}
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center" prop="Remark"></el-table-column>
				<el-table-column label="审批状态" align="center" prop="PayrollType">
					<template slot-scope="scope">
						<p v-if="scope.row.PayrollType == 0" style="color: #E6A23C;">待审批</p>
						<p v-else style="color: #67C23A;">审批完成</p>
					</template>
				</el-table-column>	
				<el-table-column label="附件" align="center" prop="Remark">
					<template slot-scope="scope">
						<el-button type="text" @click="DownLoadFileEvent(scope.row)">下载</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="300">
					<template slot-scope="scope">
						<el-popover placement="right" width="400" trigger="click">
							<UploadFileF ref="AnotherData" :multiple="true" :another-data="AnotherData" 
							:showfilelist="true" :upshow="true" content="上传文件" btnsize="medium"></UploadFileF>
							<el-button plain type="primary"  slot="reference" size="mini" @click="AnotherData.id = scope.row.Id">附件上传</el-button>
						</el-popover>
						<el-button plain type="primary" size="mini" @click="getPayrollDetails(scope.row)" style="margin-left: 10px;">详情</el-button>
						<el-button plain type="info" size="mini" @click="GetPayrollFormExcel(scope.row)">导出</el-button>
						<el-popconfirm title="这是一段内容确定删除吗" @confirm="deletePayrollDetails(scope.row)" style="margin-left: 10px;">
							<el-button slot="reference" plain type="danger" size="mini">删除</el-button>
						</el-popconfirm>				
					</template>
				</el-table-column>
			</el-table>			
		</div>
		
		
		<el-dialog :visible.sync="PayrollDetailsEntiy.show" title="工单详情" width="90%"  :append-to-body='true' @close="getTableData()">
			<payrollRealityForm :project="project" :jobContentList="payrollFormConstructionType" :payrollEntity="PayrollDetailsEntiy.PayrollDetails" :closeFun="childrenCloseEvent"></payrollRealityForm>
		</el-dialog>
		
		<el-dialog :visible.sync="PayrollDetailsAddEntiy.show" title="新建工资单" width="90%"  :append-to-body='true' @close="payrollRealityFormAddRefEvent()">
			<payrollRealityFormAdd ref="payrollRealityFormAddRef" :project="project" :closeFun="childrenCloseEvent" :jobContentList="payrollFormConstructionType"></payrollRealityFormAdd>
		</el-dialog>
	</div>
</template>

<script>
	import { Message, Switch } from 'element-ui'
	import payrollRealityForm from '../PayrollReality/payrollRealityForm.vue'
	import payrollRealityFormAdd from '../PayrollReality/payrollRealityFormAdd'
	import * as publicjs from "../../../../public/Scriput/Public"
	import UploadFileF from "../../UploadFileF";	
	export default {
		name:'payrollRealityList',
		components:{
			payrollRealityForm,payrollRealityFormAdd,UploadFileF
		},
		props:{
			project:{
				type:Object,
				required:true
			}
		},
		data() {
			return{
				payrollList:[],
				fuzerenList:[
					{ name:'1111',value:1 },
					{ name:'22222',value:2 },
				],
				formData:{
					formNumber:'',
					director:1,
				},
				PayrollDetailsEntiy:{
					PayrollDetails:{},
					show:false,
				},
				PayrollDetailsAddEntiy:{
					show:false,
				},
				deleteVisible:false,
				constructionPart:[],
				constructionType:[],
				payrollFormConstructionType:[],
				AnotherData: {
					//项目模块
					FileType: 256,
					//项目Id号
					id: 0,
					//Type：1：收方工资单 2、应发工资单、3报销单 
					Type: 2,
					Single: false,
				},
				tableStyle:500,
			}
		},
		created() {
			publicjs.http(this.$http, this.$message)
		},
		mounted() {
			this.getConstructionPartEnum()
			this.getConstructionType()
			this.getPayrollFormConstructionType()	
			this.$nextTick(()=>{
				this.getTableData()
			})		
			window.addEventListener('resize',()=>{
				this.tableHeightJiSuan()
			})
		},
		methods:{
			//表格序号
			indexMethod(index){
				return index + 1
			},
			//页面初始数据获取
			getTableData(){
				const { Id:ProjectId } = this.project || null
				if(ProjectId != null){
					this.$http.post('PayrollForm/GetPayrollFormAsync', { ProjectId,PayrollFormType:2 }).then(res=>{
						const { StatusCode,Data } = res.data || 0
						if(StatusCode == 200){
							this.payrollList = Data
						}else{
							this.payrollList = []
							this.$message.warning('获取项目收方工资单失败,请重试!')
						}
					})
				}else{
					this.$message.warning('获取项目收方工资单失败!')
				}
			},
			//单数据详情
			getPayrollDetails(row){
				this.PayrollDetailsEntiy.PayrollDetails = row
				this.PayrollDetailsEntiy.show = true
			},
			//子窗口关闭调用
			childrenCloseEvent(){
				this.PayrollDetailsEntiy.show = false
				this.PayrollDetailsAddEntiy.show = false
				this.getTableData()
			},
			// 获取施工部位
			getConstructionPartEnum(){
				this.$http.post('PayrollForm/GetConstructionPartEnum').then(res=>{
					const { StatusCode,Data } = res.data || 0
					if(StatusCode == 200) this.constructionPart = Data
					else this.constructionPart = []
				})
			},
			// 获取施工类别
			getConstructionType(){
				this.$http.post('PayrollForm/GetConstructionType').then(res=>{
					const { StatusCode,Data } = res.data || 0
					if(StatusCode == 200) this.constructionType = Data
					else this.constructionType = []
				})
			},
			// 获取工作内容
			getPayrollFormConstructionType(){
				this.$http.post('PayrollForm/GetPayrollFormConstructionType').then(res=>{
					const { StatusCode,Data } = res.data || 0
					if(StatusCode == 200) this.payrollFormConstructionType = Data
					else this.payrollFormConstructionType = []
				})
			},
			//获取数据描述
			getDataMessage(type,row){
				const { ConstructionPart,ConstructionType,JobContent,PersonId } = row || null
				let messaga = ''
				let Obj
				switch (type){
					case 'Position':
						Obj = this.constructionPart.find(x=>x.Value == ConstructionPart)
						break;
					case 'Category':
						Obj = this.constructionType.find(x=>x.Value == ConstructionType)
						break;
					case 'Content':
						Obj = this.payrollFormConstructionType.find(x=>x.Value == JobContent)
						break;
					case 'User':	
						Obj = this.$store.state.AllUsers.find(x=>x.Id == PersonId)
						break;
				}
				if(Obj) {
					if(type != 'User') messaga = Obj.Description
					else messaga = Obj.UserName
				}
				return messaga 
			},
			//删除详情
			deletePayrollDetails(row){
				this.$http.post('PayrollForm/DelPayrollForm',{ Id: row.Id }).then(res=>{
					const { StatusCode,Data } = res.data || 0
					if(StatusCode == 200){
						this.$message.success('删除成功')
					}else{
						this.$message.warning('删除失败,请重试!')
					}  
					this.getTableData()
				})
			},
			//导出数据表格
			GetPayrollFormExcel(row){
				this.$http.post('PayrollForm/GetPayrollFormExcel',{
					id:row.Id
				}).then(res=>{
					const { StatusCode,Data,Message } = res.data || 0
					if(StatusCode == 200){
						//文件下载
						publicjs.DownLoadFile({ ...Data })
					}else{
						this.$message.warning(Message)
					}
				})
			},
			//下载文件
			DownLoadFileEvent(row) {
				let Data = {
					id: row.id || row.Id,
					FileType: 256,
					Type: 2,
					FileName: '',
				}
				//文件下载
				publicjs.DownLoadFile({ ...Data })
			},
			//添加弹框关闭
			payrollRealityFormAddRefEvent(){
				this.$refs.payrollRealityFormAddRef.clearFormData()
			},
			//表格高度计算
			tableHeightJiSuan(){
				this.tableStyle = document.body.clientHeight - this.$refs.biaotou.clientHeight - 84
			},
		}
	}
</script>

<style scoped>
</style>